<template>
	<div class="ratings" ref="ratings">
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<h1 class="score">{{seller.score}}</h1>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}</div>
				</div>
				<div class="overview-right">
					<div class="score-wraper">
						<span class="title">服务态度</span>
						<star :score="seller.serviceScore" :size="36"></star>
						<span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wraper">
						<span class="title">商品评分</span>
						<star :score="seller.foodScore" :size="36"></star>
						<span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="delivery-wraper">
						<span class="title">送达时间</span>
						<span class="delivery">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<ratingselect :select-type="selectType" :only-content="onlyContent" :ratings="ratings" @contentToggle="toggleContent" @ratingtypeSelect="typeSelect"></ratingselect>
			<div class="rating-wraper">
				<ul>
					<li v-for="(rating,index) in ratings" v-show="needShow(rating.rateType,rating.text)" class="rating-item border-1px">
						<div class="avatar">
							<img :src="rating.avatar" alt="" width="28" height="28" />
						</div>
						<div class="content">
							<h1 class="name">{{rating.username}}</h1>
							<div class="star-wraper">
								<star :size="24" :score="rating.score"></star>
								<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
							</div>
							<p class="text">{{rating.text}}</p>
							<div class="recommend" v-show="rating.recommend && rating.recommend.length">
								<span class="icon-thumb_up"></span>
								<span v-for="(item,index) in rating.recommend" class="item">{{item}}</span>
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import BScroll from 'better-scroll';
	import { formatDate } from '../../common/js/date.js';
	import star from '../star/star.vue';
	import split from '../split/split.vue';
	import ratingselect from '../ratingselect/ratingselect.vue';

	const ALL = 2;
	const ERR_OK = 0;

	export default {
		props: {
			seller: {
				type: Object
			}
		},
		data() {
			return {
				ratings: [],
				selectType: ALL,
				onlyContent: true
			};
		},
		created() {
			this.$http.get('/api/ratings').then((response) => {
				response = response.body;
				if(response.errno === ERR_OK) {
					this.ratings = response.data;
					this.$nextTick(() => {
						this.scroll = new BScroll(this.$refs.ratings, {
							click: true
						});
					});
				}
			});
		},
		methods: {
			typeSelect(type) {
				this.selectType = type;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			toggleContent(onlyContent) {
				this.onlyContent = onlyContent;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			needShow(type, text) {
				if(this.onlyContent && !text) {
					return false;
				}
				if(this.selectType === ALL) {
					return true;
				} else {
					return type === this.selectType;
				}
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			'star': star,
			'split': split,
			'ratingselect': ratingselect
		}
	};
</script>

<style lang="less">
	@import '../../common/less/z.less';
	@import '../../common/less/css3.less';
	@import '../../common/less/appstyle.less';
	.ratings {
		.pos(a);
		top: 174px;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		.overview {
			display: flex;
			padding: 18px 0;
			.overview-left {
				flex: 0 0 137px;
				padding: 6px 0;
				width: 137px;
				border-left: 1px solid rgba(7, 17, 27, .1);
				.tc();
				@media only screen and (max-width: 320px) {
					flex:0 0 120px;
					width: 120px;
				}
				.score {
					margin-bottom: 6px;
					line-height: 28px;
					.font-s24();
					color: rgb(255, 153, 0);
				}
				.title {
					margin-bottom: 8px;
					line-height: 12px;
					.font-s12();
					color: rgb(7, 17, 27);
				}
				.rank {
					line-height: 10px;
					.font-s10();
					color: rgb(147, 153, 159);
				}
			}
			.overview-right {
				flex: 1;
				padding-left: 6px 0 6px 24px;
				@media only screen and (max-width: 320px) {
					padding-left:0px 0 0px 0px;
				}
				.score-wraper {
					margin-bottom: 8px;
					line-height: 18px;
					.font-s0();
					.title {
						.d-ib();
						vertical-align: top;
						.font-s12();
						color: rgb(7, 17, 27);
					}
					.star {
						.d-ib();
						margin: 0 12px;
						vertical-align: top;
					}
					.score {
						.d-ib();
						vertical-align: top;
						.font-s12();
						color: rgb(255, 153, 0);
					}
				}
			}
			.delivery-wraper {
				.font-s0();
				.title {
					line-height: 18px;
					.font-s12();
					color: rgb(7, 17, 27);
				}
				.delivery {
					margin-left: 12px;
					.font-s12();
					color: rgb(147, 153, 159);
				}
			}
		}
		.rating-wraper {
			padding: 0 18px;
			.rating-item {
				display: flex;
				padding: 18px 0;
				.border-1px(rgba(7, 17, 27, .1));
				.avatar {
					flex: 0 0 28px;
					width: 28px;
					margin-right: 12px;
					img {
						.border-radius(90px);
					}
				}
				.content {
					.pos(r);
					flex: 1;
					.name {
						margin-bottom: 4px;
						line-height: 12px;
						.font-s10();
						color: rgb(7, 17, 27);
					}
					.star-wraper {
						margin-bottom: 6px;
						.font-s0();
						.star {
							.d-ib();
							margin-right: 6px;
							vertical-align: top;
						}
						.delivery {
							.d-ib();
							margin-right: 6px;
							vertical-align: top;
							line-height: 12px;
							.font-s12();
							color: rgb(147, 153, 159);
						}
					}
					.text {
						margin-bottom: 8px;
						line-height: 18px;
						color: rgb(7, 17, 27);
						.font-s12();
					}
					.recommend {
						line-height: 16px;
						.icon-thumb_up,
						.item {
							.d-ib();
							margin: 0 8px 4px 0;
							.font-s9();
						}
						.icon-thumb_up {
							color: rgb(0, 160, 220);
						}
						.item {
							padding: 0 6px;
							border: 1px solid rgba(7, 17, 27, .1);
							.border-radius(1px);
							color: rgb(147, 153, 159);
							background: #fff;
						}
					}
					.time {
						.pos(a);
						right: 0;
						top: 0;
						line-height: 12px;
						.font-s12();
						color: rgb(147, 153, 159);
					}
				}
			}
		}
	}
</style>